$name: #{'.' + $namespace + '-checkbox'};

$transition: width var(--checkbox-transition-duration) linear;

#{$name} {
  --checkbox-transition-duration: .3s;
  display: flex;
  align-items: center;

  #{$name}__change {
    width: fit-content;
    padding: 16rpx;
    border-radius: 8rpx;
    margin-right: 16rpx;

    .#{$namespace}-button__shadow {
      display: none;
    }

    &-icon {
      visibility: hidden;

      @mixin fillUp() {
        width: 0;
        height: 100%;
        overflow: hidden;
        visibility: visible;
        position: absolute;
        top: 0;
      }

      &:first-child {
        transition: $transition;
        right: 0;
        @include fillUp();

        &::before {
          position: absolute;
          right: 0;
        }
      }

      &:last-child {
        @include fillUp();
      }
    }
  }

  &.is-active {
    #{$name}__change {

      &-icon {
        &:first-child {
          width: 100%;
          opacity: 0;
        }

        &:last-child {
          width: 100%;
          transition: $transition;
        }
      }
    }
  }

  &.is-disabled {
    color: var(--disabled-text-color);
    cursor: no-drop;
    pointer-events: none;
  }
}